<template>
  <div class="hello">
    <div v-if="cartlist.length <= 0">暂无商品</div>
    <table v-else>
      <caption><h1>购物车</h1></caption>
      <tr>
        <th></th>
        <th>编号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in cartlist" :key="item.id">
          <td><input type="checkbox" v-model="item.checkbox"></td>
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td><small>￥</small>{{item.price.toFixed(2)}}</td>
          <td>
            <button @click="item.count--" :disabled="item.count<=1?true:false">-</button>
            {{item.count}}
            <button @click="item.count++" >+</button>
          </td>
          <td><a href="#" @click.prevent="del(index)">删除</a></td>
      </tr>
      <tr>
        <td colspan="3">总价</td>
        <td colspan="3"><small>￥</small>{{totalPrice.toFixed(2)}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'shoppingCart',
  data() {
    return {
      cartlist:[
        {id:1, checkbox:true, name:"《APP》", price:10, count:1},
        {id:2, checkbox:true,name:"《WEB》",price:10,count:1},
        {id:3, checkbox:true,name:"《DOM》",price:10,count:1},
        {id:4, checkbox:true,name:"《Node》",price:10,count:1},
        {id:5, checkbox:true,name:"《AJAX》",price:10,count:1},
      ]
    }
  },
  computed:{
    totalPrice:{
      get(){
        let tota = 0;
        for (let item of this.cartlist) {
          if(item.checkbox){
            tota += item.count*item.price;
          }
        }
        return tota;
      }
    }
  },
  methods: {
    del(i){
      this.cartlist.splice(i,1)
    }
  },
}
</script>

<style scoped>
  table{
    width: 600px;
    border: 1px solid #888888;
  }
  td,th{
    border: 1px solid #888;
    padding: 10px;
  }
</style>
